<template>
  <div class="show_time">
    <div class="text" v-html="stext"></div>
    <div class="st" v-html="stime"></div>
  </div>
</template>

<script>
export default {
  name: "fbTNC",
  props: ["thr"],
  data() {
    return {
      stime: `尚未开始活动`,
      stext: "",
      tarhour: "",
    };
  },
  methods: {
    //时间获取
    takeNexttime() {
      this.tarhour = this.$parent.tarhour;
      var NowDate = new Date();
      // var day=NowDate.getDate();
      // var month=NowDate.getMonth()+1;
      // var year=NowDate.getFullYear();
      var hour = NowDate.getHours();
      if (hour % 2 == 0) {
        this.tarhour = hour;
      } else {
        this.tarhour = hour - 1;
      }
      this.tarhour = this.tarhour + 2 * this.thr;
      if (this.tarhour >= 24) {
        this.tarhour = this.tarhour - 24;
      }
      if (this.tarhour < 10) {
        this.stext = `0${this.tarhour} : 00`;
      } else this.stext = `${this.tarhour} : 00`;
    },
  },
  mounted() {
    this.takeNexttime();
    this.scount = setInterval(() => {
      this.takeNexttime();
    }, 500);
  },
  unmounted() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="less" scoped>
.show_time {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-evenly;

  .st {
    text-align: left;
    padding: 24px 9px;
    font-size: 16px;
  }
  .text {
    text-align: right;
    padding: 20px;
    padding-right: 12px;
    font-size: 24px;
  }
}
</style>